<template>
  <view id="main_view">
    <h1>动态组件</h1>
    <component :is="currentTabComponent" :index="112">
      good 我是 标签 {{ currentTabComponent }}
    </component>
    <button @click="test">点击</button>

    <h1>icon</h1>
    <view>
      size:xs lg 2x; fixed-width; rotation="90"; flip: horizontal vertical both
    </view>
    
    <icon icon="lock" />
    <icon icon="star" />
    <icon icon="network-wired" />
    <h4>字体库 '@fortawesome/fontawesome-svg-core'</h4>
    <icon :icon="['fas', 'network-wired']" rotation="180" />

    <h4>字体库 '@fortawesome/free-regular-svg-icons'</h4>
    <icon :icon="['far', 'angry']" flip="vertical" />

    <h4>字体库 '@fortawesome/free-brands-svg-icons'</h4>
    <icon :icon="['fab', 'airbnb']" />

    <h4>字体库 '@fortawesome/pro-light-svg-icons'</h4>
    <icon :icon="['fal', 'search']" size="xs"></icon>

    <h4>多图标组合使用</h4>
    <icon-layer class="fa-lg">
      <icon icon="circle" style="color: green" />
      <icon icon="check" transform="shrink-6" style="color: white" />
    </icon-layer>

    <h4>图标和文字组合使用</h4>
    <icon-layer full-width class="fa-4x">
      <icon icon="star" />
      <icon-text
        transform="down-1 right-1 shrink-14"
        value="hangge"
        style="color: white"
      />
    </icon-layer>

    <h4>遮罩</h4>
    <icon icon="star" size="lg" />
    <icon icon="star" mask="circle" />
    <icon icon="star" mask="square" />

    <h4>图标和文字组合使用<button @click="switchIcon">点击</button></h4>
    <icon :icon="icon" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      currentTabComponent: "view",
      icon: "coffee",
    };
  },
  methods: {
    test() {
      console.log("-----------test-----------------");
      if (this.currentTabComponent == "view") {
        this.currentTabComponent = "div";
        return;
      }
      this.currentTabComponent = "view";
    },
    switchIcon() {
      this.icon = "user-tag";
    },
  },
};
</script>
<style>
#main_view {
  background: rgba(255, 0, 0, 0.212);
  width: 100%;
  height: 100%;
}

h4 {
  margin-top: 20px;
  margin-bottom: 10px;
}
</style>